<template>
  <div class="recommend-contaniner">
    <!-- 轮播图和左侧下载 -->
    <div class="recommend-carousel-container">
      <el-carousel class="recommend-carousel" :autoplay="true">
        <el-carousel-item
          class="carousel-item"
          v-for="banner in bannerList"
          :key="banner.scm"
        >
          <img v-lazy="banner.imageUrl" alt="" />
        </el-carousel-item>
      </el-carousel>
      <div class="recommend-download">
        <a href="javascript:;">
          <img src="./images/10002.png" alt="" />
        </a>
      </div>
    </div>
    <div class="recommend-main">
      <!-- 页面主要内容——左侧-->
      <div class="recommend-left">
        <!-- 热门推荐 -->
        <div class="hot-recommend">
          <!-- 热门推荐头部 -->
          <div class="hot-recommend-header">
            <h3>热门推荐</h3>
            <ul class="header-ul">
              <li v-for="tag in hotRecommendTag" :key="tag.id">
                <router-link
                  :to="{
                    path: '/discovermusic/songList',
                    query: { cat: tag.name },
                  }"
                  >{{ tag.name }}</router-link
                >
              </li>
            </ul>
            <span>
              <router-link to="/discovermusic/songList">更多</router-link>
            </span>
          </div>
          <div class="recommend-split"></div>
          <!-- 热门推荐主体 -->
          <div class="hot-recommend-body">
            <div
              class="hot-recommend-item"
              v-for="hr in hotRecommend"
              :key="hr.id"
            >
              <router-link :to="{ path: '/songList', query: { id: hr.id } }">
                <img v-lazy="hr.picUrl" alt=""
              /></router-link>
              <p>{{ hr.name }}</p>
            </div>
          </div>
        </div>
        <!-- 个性化推荐 -->
        <div class="hot-recommend">
          <!-- 个性化推荐头部 -->
          <div class="hot-recommend-header">
            <h3>个性化推荐</h3>
          </div>
          <div class="recommend-split"></div>
          <!-- 个性化推荐主体 -->
          <div class="hot-recommend-body">
            <div class="hot-recommend-item">
              <img src="./images/10006.jpg" alt="" />
              <p>私人雷达 | 根据听歌记录为你打造</p>
            </div>
            <div class="hot-recommend-item">
              <img src="./images/10005.jpg" alt="" />
              <p>欧美音乐 | 欧美点唱机</p>
            </div>
            <div class="hot-recommend-item">
              <img src="./images/10004.jpg" alt="" />
              <p>原创歌曲 | 一周原创发现</p>
            </div>
            <div class="hot-recommend-item">
              <img src="./images/10007.jpg" alt="" />
              <p>说唱 | 说唱接力赛</p>
            </div>
          </div>
        </div>
        <!-- 新碟上架 -->
        <div class="hot-recommend">
          <!-- 新碟上架头部 -->
          <div class="hot-recommend-header">
            <h3>新碟上架</h3>
            <span>更多</span>
          </div>
          <div class="recommend-split"></div>
          <!-- 新碟上架主体 -->
          <div class="hot-recommend-body">
            <el-carousel
              class="album-carousel"
              :autoplay="false"
              height="190px"
            >
              <el-carousel-item class="album-item">
                <div class="album" v-for="al1 in newAlbum1" :key="al1.id">
                  <img v-lazy="al1.picUrl" />
                  <div>
                    <p>
                      <a href="javascript:;">{{ al1.name }}</a>
                    </p>
                    <p>
                      <a href="javascript:;">{{ al1.artist.name }}</a>
                    </p>
                  </div>
                </div>
              </el-carousel-item>
              <el-carousel-item class="album-item">
                <div class="album" v-for="al2 in newAlbum2" :key="al2.id">
                  <img v-lazy="al2.picUrl" />
                  <div>
                    <p>
                      <a href="javascript:;">{{ al2.name }}</a>
                    </p>
                    <p>
                      <a href="javascript:;">{{ al2.artist.name }}</a>
                    </p>
                  </div>
                </div>
              </el-carousel-item>
            </el-carousel>
          </div>
        </div>
        <!-- 榜单 -->
        <div class="hot-recommend">
          <!-- 榜单头部 -->
          <div class="hot-recommend-header">
            <h3>榜单</h3>
            <span>更多</span>
          </div>
          <div class="recommend-split"></div>
          <!-- 热门推荐主体 -->
          <div class="hot-recommend-body">
            <div
              class="ranking-item"
              v-for="list in rankingList"
              :key="list.id"
            >
              <div class="ranking-header">
                <router-link to="/discovermusic/ranking">
                  <img v-lazy="list.coverImgUrl" class="coverImg" />
                </router-link>
                <span>{{ list.name }}</span>
                <a href="javascript:;" class="playbtn">
                  <img src="./images/playbtn.jpg" alt="" />
                </a>
                <a href="javascript:;" class="collectbtn">
                  <img src="./images/collectbtn.jpg" alt="" />
                </a>
              </div>
              <div class="ranking-body">
                <ul>
                  <li v-for="(item, index) in list.tracks" :key="item.id">
                    <span>{{ index + 1 }}</span>
                    <span
                      class="ranking-song-name"
                      @click="playSong(item.id)"
                      >{{ item.name }}</span
                    >
                  </li>
                </ul>
                <p>查看全部</p>
              </div>
            </div>
          </div>
        </div>
      </div>
      <!-- 个人信息及其他信息——右侧 -->
      <div class="recommend-right">
        <div class="userLogin">
          <p>登录网易云音乐，可以享受无限收藏的乐趣，并且无限同步到手机</p>
          <el-button type="danger">用户登录</el-button>
        </div>
        <div class="joinedSinger">
          <div class="joinedSinger-header">
            <span>入驻歌手</span>
            <span>查看全部</span>
          </div>
          <div class="joinedSinger-split"></div>
          <div class="joinedSinger-body">
            <div class="singer-item" v-for="item in singerList" :key="item.id">
              <router-link :to="{ path: '/artist', query: { id: item.id } }">
                <img v-lazy="item.picUrl" alt=""
              /></router-link>
              <div>
                <p class="singer-name">{{ item.name }}</p>
                <p class="singer-title">唱作歌手</p>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script lang="ts">
export default {
  name: "XRecommend",
};
</script>

<script lang="ts" setup>
import {
  getRecommendBannerApi,
  getHotRecommendApi,
  getHotRecommendTagApi,
  getNewAlbumApi,
  getRankingListApi,
  getSingerListApi,
} from "@/api/api/recommend";
import type {
  RecommendBannerList,
  HotRecommendList,
  HotRecommendTagList,
} from "@/api/api/model/recommendModel";
import { ref, onMounted } from "vue";
import { useSongPlaying } from "@/stores/songPlaying";

const bannerList = ref<RecommendBannerList>();
const hotRecommend = ref<HotRecommendList>();
const hotRecommendTag = ref<HotRecommendTagList>();
const newAlbum = ref<any>();
const newAlbum1 = ref<any>();
const newAlbum2 = ref<any>();
const rankingList = ref<any>([]);
const singerList = ref<any>([]);

const useSongPlayingStore = useSongPlaying();

const playSong = (id: any) => {
  useSongPlayingStore.getsongList(id);
};

/********************* 歌手列表 **************************/
const getSingerList = async () => {
  const res = await getSingerListApi(0, 10);
  singerList.value = res.artists;
};

/********************* 新碟上架 **************************/
const getNewAlbum = async () => {
  const res = await getNewAlbumApi();
  newAlbum.value = res.weekData.slice(0, 10).map((item) => {
    return {
      picUrl: item.picUrl,
      artist: { name: item.artist.name, id: item.artist.id },
      name: item.name,
      id: item.id,
    };
  });
  newAlbum1.value = newAlbum.value.slice(0, 5);
  newAlbum2.value = newAlbum.value.slice(5, 10);
};

/********************* 榜单 **************************/
const getRankingList = async () => {
  const ids = [19723756, 3779629, 2884035];
  for (let i = 0; i < ids.length; i++) {
    const res = await getRankingListApi(ids[i]);
    const newRes = {
      playlist: res.playlist,
    };
    const rankingItem = {
      id: newRes.playlist.id,
      name: newRes.playlist.name,
      coverImgUrl: newRes.playlist.coverImgUrl,
      tracks: newRes.playlist.tracks.slice(0, 10),
    };

    rankingList.value.push(rankingItem);
  }
};

/********************* 热门推荐标签 **************************/
const getHotRecommendTag = async () => {
  const res = await getHotRecommendTagApi();
  hotRecommendTag.value = res.tags.slice(0, 6).map((item) => {
    return {
      name: item.name,
      id: item.id,
    };
  });
};

/********************* 热门推荐 **************************/

const getHotRecommend = async () => {
  const res = await getHotRecommendApi();
  hotRecommend.value = res.result.slice(0, 8).map((item) => {
    return {
      id: item.id,
      name: item.name,
      picUrl: item.picUrl,
    };
  });
};

/******************* 轮播图功能 ***********************/

// 获取轮播图
const getRecommendBanner = async () => {
  const res = await getRecommendBannerApi();
  bannerList.value = res.banners.map((item) => {
    return {
      imageUrl: item.imageUrl,
      scm: item.scm,
    };
  });
};

onMounted(() => {
  getRecommendBanner();
  getHotRecommend();
  getHotRecommendTag();
  getNewAlbum();
  getRankingList();
  getSingerList();
});
</script>

<style lang="scss" scoped>
.recommend-carousel-container {
  display: flex;
  justify-content: center;
  background: no-repeat url(./images/10012.jpeg);
}
.recommend-main {
  display: flex;
  justify-content: center;
}
.recommend-left {
  width: 740px;
  height: 100%;
  border: 1px solid #d3d3d3;
}
.recommend-right {
  width: 267px;
  height: 100%;
  border: 1px solid #d3d3d3;
}
.recommend-carousel {
  width: 740px;
  height: 300px;
}
.recommend-download img {
  height: 300px;
}
.carousel-item img {
  width: 100%;
  height: 100%;
}

/* 热门推荐 */
.hot-recommend {
  padding: 10px;
  width: 100%;
}
.hot-recommend-header {
  display: flex;
  span {
    flex: 1;
    text-align: right;
    font-size: 12px;
  }
  h3 {
    font-weight: 500;
  }
}
.header-ul {
  display: flex;
  font-size: 12px;
}
.header-ul li {
  padding: 10px 10px;
}
// 分割线
.recommend-split {
  width: 100%;
  height: 1px;
  background: red;
}
.hot-recommend-body {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
}
.hot-recommend-item {
  width: 140px;
  height: 140px;
  font-size: 12px;
  margin: 15px 15px 50px 0;
}
.hot-recommend-item img {
  margin-bottom: 5px;
  width: 140px;
  height: 140px;
}
// 新碟上架
.album-carousel {
  width: 740px;
  height: 220px;
}
.album-item {
  width: 100%;
  height: 186px;
  border: 1px solid #d3d3d3;
  display: flex;
  justify-content: space-around;
  align-items: center;
  margin-top: 20px;
}
.album-item img {
  width: 100px;
  height: 100px;
}
.album-item p {
  margin-top: 5px;
  width: 100px;
  text-align: center;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
}
.album {
  text-align: center;
  font-size: 13px;
}
// 榜单
.ranking-item {
  width: 33.33%;
  height: 500px;
  border: 1px solid #d3d3d3;
  padding: 15px;
  margin-top: 10px;
}
.ranking-header {
  position: relative;
  margin-bottom: 20px;
}
.ranking-header .coverImg {
  width: 100px;
  height: 100px;
}
.ranking-header span {
  position: absolute;
  font-weight: bold;
  top: 10px;
  right: 50px;
}
.ranking-header .playbtn {
  position: absolute;
  bottom: 20px;
  right: 72px;
}
.ranking-header .collectbtn {
  position: absolute;
  bottom: 21px;
  right: 32px;
}
.ranking-body li {
  margin-left: 10px;
  padding: 6px;
  font-size: 14px;
  display: flex;
}
.ranking-body li span {
  margin-right: 10px;
}
.ranking-body li .ranking-song-name {
  display: inline-block;
  margin-right: 10px;
  width: 100%;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  cursor: pointer;
}
.ranking-body p {
  text-align: right;
  font-size: 13px;
}

// 右侧
// 用户登录块
.userLogin {
  width: 100%;
  height: 120px;
  text-align: center;
  font-size: 12px;
  border: 1px solid #d3d3d3;
}
.userLogin p {
  margin: 20px;
}
.joinedSinger {
  width: 100%;
  height: 100%;
}
.joinedSinger-split {
  width: 100%;
  height: 1px;
  background: #d3d3d3;
}
.joinedSinger-header {
  padding: 10px;
  display: flex;
  justify-content: space-between;
  font-size: 13px;
}
.singer-item {
  padding: 15px;
  display: flex;
  justify-content: center;
  align-items: center;
}
.singer-item img {
  width: 100px;
  height: 100px;
}
.singer-item p {
  font-size: 13px;
  display: flex;
  justify-content: space-around;
}
.singer-name {
  width: 120px;
  font-weight: bold;
  text-overflow: ellipsis;
  overflow: hidden;
  white-space: nowrap;
}
</style>
